<template>
	<scroll-view scroll-y class="container">
		<view class="content-wrap">
			<view class="content-item">
				<view class="goods" v-for="(item, index) in cartLists">
					<label :class="item.checked ? 'act' : ''" @click="changeBooks(item, item._id)"><text class="iconfont icon-danxuan-weixuan"></text></label>
					<view class="good">
						<view class="img-wrapper"><image :src="item.img"></image></view>
						<view class="good-content">
							<view class="good-title text-line">{{ item.name }}</view>
							<view class="spec">
								<view class="spec1">
									<text class="name ellipsis">{{ item.attr }}</text>
								</view>
							</view>
							<view class="good-desc">
								<view class="good-price">
									<text>￥</text>
									{{ item.price }}
								</view>
								<uni-number-box @change="numBox($event, item._id)" :min="1" :value="item.num" />
								<view class="text"><text @click="remmoveCart(item._id)">删除</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="total-wrap">
			<view class="total-left">
				<label :class="checked ? 'act' : ''" class="act=!act">
					<text @click="changeBook" class="iconfont icon-danxuan-weixuan"></text>
					全选
				</label>

				<view class="total-con">
					<view class="top-con">
						合计:
						<text class="symbol">￥</text>
						<text class="total">{{ totalPrice | formatPrice }}</text>
					</view>
				</view>
			</view>
			<view class="total-right" @click="buyOrder">购买</view>
		</view>
	</scroll-view>
</template>

<script>
// import tuiNumberbox from '@/components/numberbox/numberbox.vue';
import UniNumberBox from '@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue';
export default {
	components: {
		UniNumberBox
		// tuiNumberbox
	},
	data() {
		return {
			requt: 'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http',
			cartLists: [],
			checked: true,
			act: true,
			flags: true, //判断加入购物车立即购买是否传参
			cart_id: [] //点击购买时购物新列表
		};
	},
	onTabItemTap() {
		this.cartList();
	},
	onLoad() {
		this.cartList();
	},
	//总计价格小数点
	filters: {
		formatPrice(data) {
			if (typeof data === 'number') {
				return parseFloat(data).toFixed(2);
			}
			return 0.0;
		}
	},
	computed: {
		//当单选改变时，下面的价格总数也跟着变化
		totalPrice: {
			get() {
				let totalPrice = 0;
				this.cartLists.forEach(v => {
					if (v.checked) {
						totalPrice += v.num * v.price;
					} else {
						return;
					}
				});
				return totalPrice;
			}
		}
	},
	methods: {
		// 购物列表车接口
		cartList() {
			let uid = uni.getStorageSync('uid');
			uni.request({
				url: this.requt + '/api/get_cart_list',
				data: {
					uid
				},
				success: res => {
					console.log(res.data.data);
					this.cartLists = res.data.data;
				}
			});
		},
		// 移除购物车商品接口
		remmoveCart(_id) {
			console.log(_id);
			uni.request({
				url: this.requt + '/api/remove_cart',
				method: 'POST',
				data: {
					_id
				},
				success: res => {
					console.log(res);
					this.cartList(); //再次调购物车列表循环
					this.$forceUpdate();
				}
			});
		},
		//单个商品勾选
		changeBooks(item, _id) {
			item.checked = !item.checked;
			if (!item.checked) {
				this.checked = false;
				//购物车取消选中接口
				uni.request({
					url: this.requt + '/api/cancel_cart',
					method: 'POST',
					data: {
						_id
					},
					success: res => {
						console.log(res);
					}
				});
			} else {
				const test = this.cartLists.every(item => {
					return item.checked === true;
				});
				if (test) {
					this.checked = true;
					// console.log(test);
					//购物车选中接口
					uni.request({
						url: this.requt + '/api/check_cart',
						method: 'POST',
						data: {
							_id
						},
						success: res => {
							console.log(res);
						}
					});
				} else {
					this.checked = false;
				}
			}
		},
		//全选，全不选
		changeBook() {
			this.checked = !this.checked;
			if (this.checked) {
				this.cartLists.map(item => {
					item.checked = true;
				});
			} else {
				this.cartLists.map(item => {
					item.checked = false;
				});
			}
		},
		//购物车数量改变
		numBox(num, _id) {
			uni.request({
				url: this.requt + '/api/change_cart_num',
				method: 'POST',
				data: {
					_id,
					num
				},
				success: res => {
					console.log(res);
					this.cartList(); //再次调购物车列表循环
				}
			});
		},
		//购买订单按钮
		buyOrder() {
			// 提交购物车订单
			// 判断是否选择购物车商品
			let cart_id = [];
			for (let i = 0; i < this.cartLists.length; i++) {
				if (this.cartLists[i].checked == true) {
					cart_id.push(this.cartLists[i]._id);
				}
			}
			this.cart_id = cart_id;
			console.log(this.cart_id);
			uni.navigateTo({
				url: `/pages/order/createOrder?cart_id=${this.cart_id}`
			});
		}
	}
};
</script>

<style lang="scss">
page {
	.uni-numbox__minus .uni-numbox-btns {
		width: 10px;
	}
	.uni-numbox__plus .uni-numbox-btns {
		width: 10px;
	}
	width: 100%;
	height: calc(100% - 110upx);
	background: #f5f5f5;
	.container {
		width: 100%;
		height: 100%;
		overflow: hidden;
		.header {
			position: relative;
			width: 100%;
			height: 360upx;
			background: #fc7827;
			background-size: cover;
			overflow: hidden;
			/*  #ifndef  APP-PLUS  */
			height: 280upx;
			background-size: 100% 100%;

			/*  #endif  */
			.title-contents {
				position: fixed;
				top: 0;
				width: 100%;
				height: calc(var(--status-bar-height) + 88upx);
				z-index: 100008;

				.top-view {
					width: 100%;
					height: var(--status-bar-height);
					background: #fc7827;
				}

				.titles {
					display: flex;
					flex-direction: row;
					height: 88upx;
					background: #fc7827;

					.titleLeftButton {
						width: 88upx;
						height: 88upx;
						line-height: 88upx;
						text-align: center;

						image {
							width: 40upx;
							height: 40upx;
						}
					}

					.titleText {
						width: 574upx;
						line-height: 88upx;
						text-align: center;
						font-size: 36upx;
						color: #fff;
					}

					.titleRightButton {
						width: 88upx;
						height: 88upx;
						line-height: 88upx;
						text-align: center;
						font-size: 32upx;
						color: #fff;
					}
				}
			}
		}

		.content-wrap {
			margin-top: 20upx;
			margin-left: 24upx;
			width: 702upx;
			//
			.content-item {
				margin-bottom: 20upx;
				border-radius: 20upx;
				background: #fff;
			}

			.goods {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20upx;

				&:last-child {
					margin-top: 0;
				}

				label {
					margin-left: 20upx;
					line-height: 214upx;
					.iconfont {
						font-size: 46upx;
						color: #bbb;
					}
					&.act .iconfont {
						color: $theme-color;
						&::before {
							content: '\e617';
						}
					}
				}

				.good {
					display: flex;
					justify-content: space-between;
					width: 624upx;
					padding: 20upx 0 0;
					box-sizing: border-box;
					border-bottom: 1px solid #eee;
					.img-wrapper {
						width: 180upx;
						height: 180upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.good-content {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 440upx;
						height: 180upx;
						padding: 0 20upx;
						box-sizing: border-box;

						.good-title {
							white-space: nowrap;
							// overflow:hidden;
							text-overflow: ellipsis;
							font-size: 28upx;
							color: #111;
						}

						.spec {
							display: flex;
							flex-direction: row;

							.spec1 {
								display: flex;
								flex-direction: row;
								align-items: center;
								padding: 0 16upx;
								box-sizing: border-box;
								width: 100%;
								height: 40upx;
								border-radius: 8upx;
								//

								.name {
									display: inline-block;
									// width: 85%;
									padding: 0 15upx;
									line-height: 40upx;
									font-size: 24upx;
									color: #666;
									background: #f6f6f6;
								}

								.iconfont {
									color: #999;
								}
							}
						}

						.good-desc {
							display: flex;
							justify-content: space-between;

							.good-price {
								line-height: 38upx;
								color: #fb5248;
								font-size: 30upx;
							}
							.text {
								width: 48px;
								background-color: #e7e7e7;
								text-align: center;
								border-radius: 2px;
							}
						}
					}
				}
			}
		}

		.total-wrap {
			position: fixed;
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			background: #fff;
			z-index: 9;
			/*  #ifndef  H5  */
			bottom: 0px;
			/*  #endif  */
			/*  #ifdef  H5  */
			bottom: 50px;
			/*  #endif  */

			.total-left {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-left: 20upx;
				width: 490upx;
				height: 100%;
				color: #333;
				box-sizing: border-box;

				label {
					font-size: 28upx;
					display: flex;
					align-items: center;
					.iconfont {
						font-size: 46upx;
						color: #bbb;
						margin-right: 5px;
					}
					&.act .iconfont {
						color: $theme-color;
						&::before {
							content: '\e617';
						}
					}
				}

				.total-con {
					display: flex;
					flex-direction: column;
					margin-right: 20upx;
					.top-con {
						display: flex;
						flex-direction: row;
						line-height: 100upx;
						font-size: 30upx;
						color: #333;
						.freight {
							margin-right: 16upx;
							font-size: 22upx;
							color: #999;
						}
						.symbol {
							font-size: 24upx;
							color: #fc511f;
						}

						.total {
							color: #fc511f;
						}
					}
					.bottom-con {
						display: flex;
						flex-direction: row;
						line-height: 36upx;
						font-size: 22upx;
						.discounts {
							color: #fb5248;
							margin-right: 16upx;
						}
						.detail {
							color: #666;
						}
						.iconfont {
							font-size: 14px;
						}
					}
				}
			}

			.total-right {
				width: 200upx;
				height: 80upx;
				line-height: 80upx;
				margin-top: 10upx;
				margin-right: 20upx;
				background: #fc511f;
				color: #fff;
				text-align: center;
				font-size: 28upx;
				border-radius: 40upx;
			}
		}
		.mask {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 10009;
		}
		.mask-content {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 510upx;
			background: #fff;
			z-index: 10009;
			.head {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 0 25upx;
				box-sizing: border-box;
				height: 110upx;
				.title {
					position: relative;
					padding-left: 20upx;
					box-sizing: border-box;
					line-height: 110upx;
					font-size: 32upx;
					color: #010101;
					font-weight: bold;
					&::before {
						position: absolute;
						left: 0;
						top: 40upx;
						content: ' ';
						width: 6upx;
						height: 30upx;
						background: blue;
					}
					text {
						margin-left: 20upx;
						font-weight: normal;
						font-size: 24upx;
						color: #666;
					}
				}
				image {
					width: 30upx;
					height: 30upx;
				}
			}
			.holder {
				color: #999;
			}
			.list {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin: 0 auto;
				width: 700upx;
				height: 70upx;
				// border-bottom: 1px solid #eee;
				text {
					font-size: 28upx;
					color: blue;
					text {
						margin-left: 20upx;
						font-size: 24upx;
						color: #666;
					}
				}
			}
			.footer {
				position: absolute;
				bottom: 0;
				width: 100%;
				line-height: 94upx;
				color: blue;
				background: blue;
				text-align: center;
				font-size: 34upx;
			}
		}
	}
}
</style>
